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ABSTRACT 
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Abstract: Interaction with the information on the Web pages has been often reduced to the 
selection of links. This is a serious limit to all the Web applications that require an effective 
interaction with the information. Among the others, educational applications suffer from this 
limitation. Recent technologies, such as D-HTML and Java, are changing this, and opening 
up new interactive solutions on the Web. In this paper, we report on the design strategies and 
technical solutions we have adopted to increase interaction in a Web-Based Instruction 
system. In particular, but not exclusively, we have focused on the learning needs of university 
students on the subjects of Urban Planning and Architecture. Specifically, the developed 
system allows authorized users to modify the informative hypertext network dynamically; in 
addition, users can handle and re-elaborate the information published on the web pages 
through specific “working tools”. The paper mainly focuses on these tools, from functional 
and technical points of view. 



Introduction 

The World Wide Web is fast emerging as one of the most popular technologies for education, since it allows 
educational institutions to potentially reach millions of people located all over the world [De Bra 98]. 
Specifically, Web-Based Instruction systems, based on the integration of a rich hypermedia information system 
with powerful communication tools [Ibrahim et al. 95], have proved the instructional effectiveness of teaching 
and learning through the Web [Alexander 95]. 

However, some important features required for an effective use of the Internet in education are still missing from 
the Web. Limits concern many aspects of the Web, from presentation to interaction, from navigation to structure. 
Amongst the limits, we point out: 

- The hypertext feature of the Web is extremely author-centered: users can only follow the hypertextual paths 
established by others (the page authors), but are not allowed modifying the existing links or adding new ones. 
Even if the available hypertextual navigation is a very important educational activity by itself, the impossibility 
of interacting with the information structure is a limit for educational applications. 

- Information provided by the servers is usually in the form of web pages identical for all the students of on-line 
modules, rather than personalized pages. 

- In html, information and its attributes (i.e., html tags) are mixed in the same document, thus making it difficult 
to work with automatic procedures aimed at elaborating the pure informative content [Andrews et al. 95]. 

- Interaction with the content of the pages is really poor, even though recent technologies provide interesting 
solutions. 

More generally speaking, accessing a rich information environment -even if it is integrated with effective 
communication tools- is not a sufficient condition for expanding knowledge and stimulating learning. In fact, 
from a pedagogic point of view, learning requires “a deep understanding of the subject content” [Alexander 95] 
through a cognitive re-elaboration of the information [Colboum 95], 

Some design strategies can be adopted to overtake some limits of the Web. Research in this direction covers 
many aspects: from the hypertext organization of the information for individual learning paths [Oliver et al. 96] 
to the use of multiple media sources; from the publishing formats to the design of interfaces to reduce the 
cognitive overload; from the possibility of planning collaborative activities, to adaptive hypermedia [Brusilovsky 
96] [De Bra 98], to the integration of tools which have proved particularly effective for stand alone educational 
hypermedia systems; and so forth. 

In this paper we report on the design strategies we have adopted and on some specific tools we have developed 
to improve the interaction in a Web-Based Instruction (WBI) system. The system is aimed at supporting new 
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didactic approaches to the subjects of Urban Planning and Architecture through the activation of on-line modules 
at University level. 



Brief Introduction to the Developed WBI System and Innovative Features 

The Web-Based Instruction system is organized in two “work areas” respectively named “Analysis Area” and 
“Design Area”. The Analysis Area organizes-in a hypertextual way- the “external” information necessary for 
design activities in Architecture and Urban Planning (data on the town and on particular areas, the urban context 
for a new building, building regulations, administrative laws, formal and bibliography references, and so on). 

The Design Area is directly aimed at some important phases of the design process in Architecture; it integrates 
Internet synchronous and asynchronous communication tools (e-mail, electronic discussion forums, video- 
conferencing, chatting) and tools to support the “control” of the project (virtual galleries, shared blackboard). 

The Analysis Area represents an information repository for on-line educational modules activated on and 
managed through the system. The information in this area concerns, as a case study, the city of Palermo (Italy) 
and the design activities focus on, in particular, the sea front, in view of its future refurbishment. 

In this paper, we do not present the Design Area in more details [Corrao et al. 99]; rather, we focus on the Analysis 
Area, by highlighting the interaction mechanisms implemented on it and their benefits in the educational field. 
Actually, the system has been developed in such a way to provide different classes of users with different access 
facilities. Specifically, “students”, “teachers” and “expert guests” can extend the information network 
interactively, by adding new pages and new (internal and external) links to the Analysis Area. “Students” can 
handle and re-elaborate the informative content of the pages; to this aim, we have implemented the “Working 
tools” which allow students to mimic effective traditional study activities. Changes operated on the Analysis 
Area can be “public”, which means that they modify the original structure and content of the information 
network, and will be shown to all the classes of users; otherwise, changes are private to their author, so that they 
modify a “personalised” version of a web page in the Analysis Area (in addition, personalization can take into 
account some user’s preferences, such as visualization preferences). Finally, “students”, “teachers” and “tutors” 
can review the “study activities” performed during a specific study session (visited pages, operations on the page 
content, new added pages and links, and so on). We consider a “work session” as the set of operations performed 
by the user during two consecutive logs into the system. 

Users gain access to the system through their Home Page [Fig. 1], corresponding to a personalized access point 
to the Design Area as well as to the Analysis Area. 

Following, we report on the strategies we have adopted in order to implement the system. 



Extending the Information Network 

From a methodological point of view the possibility of extending the information network can improve learning 
through the construction of knowledge. This real interaction between students and the knowledge representation 
in the hypertext network is an important point towards a real and significant implementation of the Constructivist 
theory on the Web, by allowing for the development of personalized in-depth research sections [Schank 94]; the 
possibility of extending the information network allows teachers and expert guests to enrich the content of the 
system too. Finally, the privileges accorded to specific classes of users prevent guests from arbitrarily adding 
information to the system. 

The possibility of extending the information network rises important theoretical and technical questions about 
the parameters to be fixed in order to guarantee a consistent growth of an on-line informative hypertextual 
network. Firstly, we have focused on a very precise model of the information domain, and imposed an a-priori 
organization of information; in such a way, new nodes can be immediately classified in some pre-defined 
category (and added to the right place in the network). Secondly, we have imposed some limits to the extension 
mechanism, both at information node and link levels; particular attention has been paid to the types of links users 
can add to the system. These constraints have been fixed in such a way to preserve the original structure of the 
network, yet allowing people to add new pieces of information. Moreover, it is extremely important to keep 
information about each node and link author, in order to guarantee source reliability. Finally, it has been 
necessary to provide system known users with mechanisms showing modifications to the network since their last 
access. 
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Fig. 1: The user Home Page is the personal entry point to system. 



Specific tools have been developed to allow users to add nodes and associative links. By selecting a “New Page” 
button [Fig. 2], the user can add the content of the new page through a preformatted form; afterwards, s/he is 
guided to identify the category of information the new node is to be classified. Through the “New Link” button, 
the user can select the link anchor by interacting directly with the text on the page, through a common click-and- 
drag operation on the text; then, she is guided to select the link destination. 

New added pages and links are public to all the system users, and not only to their authors, thus providing for 
learning activities based on cooperative production of knowledge. 



Working on the Information Pages 

The “working tools” sustain the user’s attention at high level and develop his/her critical sense and his/her 
abilities to search for, extract and synthesize information. Specifically, we refer to the tools that allow the users 
to mimic traditional activities, through a series of stationery items like “Marker”, “Foot-Note” and “Page-mark”. 
These tools, together with the “Note-book” and the “Kit bag”, enable the user to handle and manipulate the 
information in the web pages. Changes to the page content are private to the user who makes the modification. 
The philosophy of these tools is, in fact, the provision of mechanism for individual study strategies. In addition, 
making private modifications available to all the users could produce a chaotic representation of the information. 
The “ Marker ” tool allows parts of the text on the pages to be highlighted. The selected parts remain highlighted 
until the end of the on-line module; in addition, the user can decide whether and when to transform these 
selected parts into real informative documents by putting them into the “Kit bag”. The " Foot-Note” tool allows 
the user to add notes, reference-marks and other information to the text of a page. The notes, which are for the 
private use of the user who created them, remain “attached” to the pages from one on-line work session to 
another. During first reading, the user can “mark” each page of the system s/he considers relevant to his/her 
studies by using the " Page-mark ” tool (activated through a specific button [Fig. 2]); the user can navigate back 
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Fig. 2 : A screen shot of the system while the user is adding a note; the upper frame 
contains the “working tools” buttons and the buttons to extend the information network. 



to the marked pages through the “Iter” tool (refer to [Controlling Oneself Study Path]) to study these pages in 
more detail. The " Note-book ” tool works like a real note-book enabling the user to write down reflections, 
critical notes, and so on; for this reason it represents a collection of writing sheets. It is activated through the 
Note-book button [Fig. 2], The user can access the Note-Book in the Design Area and pass through the different 
notes taken during the navigation across the Analysis Area. The tool “Iter” highlights the presence of footnotes 
on the pages. Finally, the “Kit bag ” tool represents a kind of catalogue that the users carry with them during 
navigation through the system, and where they store pieces of information collected on this way around. The 
pieces of information in the “Kit bag” retain the reference to their original web page; therefore, it is possible for 
the user to go back to the page, and choose links to other parts of the system. Furthermore, users carry the “Kit 
bag” with them in the “Design Area”. The user interaction with the “Foot-Note”, “Marker” and “Kit bag” tools is 
extremely easy and rapid: once the corresponding button has been selected [Fig. 2], the user selects (through the 
click-and drag mechanism) the chunk of text which is, respectively, the anchor for the note, the text to be marked 
or the piece of text to be inserted into the kit bag. 



Controlling Oneself Study Path 

One of the most effective tools to help the users navigate through the information is the “Iter” tool : it shows the 
list of pages visited during each work session or since a date specified by the user. Unlike the “history” tool 
available in commercial browsers, the “Iter” tool keeps track of the operation performed on the pages through 
the tools described above. In particular, next to the name of every page, there are symbols to indicate the 
operation carried out by the user, so s/he may locate the information s/he considered important and return there 
directly. The same information can be accessed by the teachers and the tutors of the on-line modules, thus 
controlling and assessing the students’ activities in the system. Non-technical teachers can, therefore, work with 
the system and perform assessment activities in a very easy way. 
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It should be noted that some of the described activities could already be performed by using features of the 
browsers and of the most popular operating systems. However, these solutions are unsatisfactory because the 
mechanisms are not integrated into a single environment, they are usually separated from the leaming/reading 
context (the informative content of the Web pages), and require a cognitive overload on the part of the 
leamer/reader. 



System Architecture and Implementation Overview 

The implementation of the system is strongly centered on Java ™, both on the client-side and on the server-side. 
Specifically, Java Applets are used to host the text and to handle the user interaction; on the server side, the 
system is managed by a set of Servlets; to be more precise, servlets handle the mechanism necessary to provide 
the personalised pages to each registered user and to log all the user’s operations. To this aim, an SQL- 
compatible Data Base is used to store information about the registered users (login, password, visualization 
preferences, and so forth), specific information belonging to each user (references to the file containing the 
personal notes added during the navigation, references to the information stored into the kit bag, and so on) and 
information on the modifications that each user has made on each page of the system. In particular, the system 
stores four different files for each page in the Analysis Area: the html page, containing the page layout, the file 
containing the pure text, the file of the public attributes (html formatting tags, link tags) and the file of the 
private attributes (to be more precise, there is one “private” file for each registered user). The separation between 
content, layout and attributes greatly improves the management of the personal versions of the pages. Finally, a 
Web Server, used to deliver html pages to the browser completes the system architecture. 

When a registered user logs into the system, a specific servlet sends the user’s Homepage to the client. As told 
before, the Homepage represents the personal entry point to all the parts of the system, included the Analysis 
Area; in order to guarantee the deliver of the personal pages of the Analysis Area to each user, all the URLs 
contained in the HomePage are modified in such a way to include its owner’s ID. The ID will enable the servlets 
to identify the origin of each request. Specifically, when the client requires a page of the Analysis Area, an 
applet sends the modified URL to a specific servlet (ReqDocument), together with indication of the file 
containing the text as parameter; then, the applet sets up a channel which is used by the servlet to deliver the 
document. The particular servlet to be activated and the parameters (if required) are also included into the URL 
sent by the browser. The ReqDocument servlet builds the document by merging all the information contained in 
the four files reported before. When the document is received by the client, the applet interprets the tags included 
in the document, divides the text into the lines which will appear on the page, builds two arrays for each line 
containing the pure text (line_text) and the text inclusive of the tags (line_tag), and finally displays the 
document. The two arrays are necessary to handle the click-and-drag operation on the text. 

The set of tags, which the applet is able to interpret, is a reduced sub-set of html tags together with new 
proprietary tags defined by the authors to encode the user changes to the text. 

The selection of chunks of text on the page through the click-and-drag mechanism (which is central to many 
operations) is handled by the applet that hosts the text. 

When a chunk of text is selected and the user operates on it through one of the tools described above, a 
communication process between the applet which handles the operative buttons [Fig. 2] and the applet hosting 
the text is started, so that the selected text is modified according to the operation selected by the user. In addition, 
the notification of the user action and of the words affected by it is sent to the server, so that the DataBase and 
the specific files are modified. 

Some examples of the working mechanism for the most significant tools are reported. By selecting the Marker 
tool, the system modifies the background color of the selected text and communicates the event to the server; by 
activating the Foot-Note tool, the system opens a Java frame external to the browser, thus allowing the user to 
add the note [Fig. 2]; afterwards, it adds a symbol at the end of the selected text in order to anchor the footnote, 
and passes the event (including the note content) to the server; finally, by choosing Link button, the applet opens 
a Java frame external to the browser, allowing the user to select the page to be linked to the new created link, or 
directly writing the URL (internal and external URL’s can be specified by the user); the new link is passed to the 
server. 

The developed prototype is running on Windows NT platform equipped with Apache Web Server and Microsoft 
Access Database. 
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Conclusions and Future Developments 

In this paper, we have proposed some design and technical solutions to improve interaction in a Web-Based 
Instruction system. Specifically, we have introduced the design strategies which allow users to extend the 
information network, and some “working tools” which can maximize the learning and reading processes and 
facilitate the recognition of the phases of knowledge acquisition. Even if the presented system concerns a 
specific subject, and is aimed at University studies level, the working tools should be considered as general 
solutions for educational systems. The Analysis Area can be substituted straightforwardly, thus widening the use 
of the system to different application fields. Anyway, a rigorous definition of the knowledge domain is necessary 
to allow for a consistent growth of the Analysis Area. Finally, the communication tools in the Design Area can 
be easily adapted for different educational contexts, and new tools can be integrated into it. The main limit of the 
Java based implementation is the restricted number of html tags the system recognizes in order to reduce the 
complexity of the interpretation work; consequently, an appropriate tradeoff between complexity and 
effectiveness should be investigated further. There are some other important developments we foresee for the 
presented system: firstly, it is possible for the servlet mechanism to work with distributed data base; secondly, 
some operations on the text which have been defined “private” can be straightforwardly made public, and vice 
versa, according to the user’s decision and to the use context of the system. Finally, division between pure text 
and text attributes makes it possible the implementation of effective automatic procedures on the text. 
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